<template>
  <div class="app-container">
    <el-row type="flex" justify="end">
      <el-form inline :model="formInline">
        <el-form-item label="答复状态">
          <el-select
            v-model="formInline.answerStatus"
            clearable
            placeholder="选择答复状态"
          >
            <el-option label="未答复" value="1" />
            <el-option label="已答复" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" type="index" align="center" width="60" />
      <el-table-column
        label="写信人"
        align="center"
        prop="djUserName"
        width="120"
      />
      <el-table-column label="信件类别" align="center" width="90">
        <template slot-scope="{ row }">
          {{ row.type | filterType }}
        </template>
      </el-table-column>
      <el-table-column label="部门" align="center" prop="deptName" />
      <el-table-column label="岗位" align="center" prop="positionName" />
      <el-table-column label="电话" align="center" prop="phone" width="110" />
      <el-table-column label="邮箱" align="center" prop="email" width="170" />
      <el-table-column
        label="标题"
        align="center"
        prop="title"
        show-overflow-tooltip
      />
      <el-table-column
        label="提交时间"
        align="center"
        prop="createTime"
        width="170"
      />
      <el-table-column
        label="收件人"
        align="center"
        prop="receiveInformation"
      />
      <el-table-column label="答复状态" align="center" width="90">
        <template slot-scope="{ row }">
          {{ row.answerStatus | filterAnswerStatus }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="{ row }">
          <el-button size="mini" plain @click="view(row)">查看</el-button>
          <el-button
            v-if="row.answerStatus == 1"
            size="mini"
            type="primary"
            plain
            @click="reply(row)"
          >
            答复
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px" />
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      @size-change="onPageSizeChange"
      @current-change="onCurrentPageChange"
    />

    <el-dialog
      width="650px"
      :title="title"
      :visible.sync="show"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form label-width="6em" disabled>
        <el-row>
          <el-col :span="12">
            <el-form-item label="写信人">
              <el-input v-model="dialogForm.djUserName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="信件类别">
              <el-select
                v-model="dialogForm.type"
                clearable
                placeholder="选择信件类别"
              >
                <el-option label="建议" value="1" />
                <el-option label="咨询" value="2" />
                <el-option label="投诉" value="3" />
                <el-option label="举报" value="4" />
                <el-option label="其他" value="5" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门">
              <el-input v-model="dialogForm.deptName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位">
              <el-input v-model="dialogForm.positionName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话">
              <el-input v-model="dialogForm.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="dialogForm.email" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="地址">
          <el-input v-model="dialogForm.address" />
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="dialogForm.title" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="dialogForm.content" :rows="5" />
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-form
        ref="form"
        label-width="6em"
        :model="dialogForm"
        :disabled="title !== '答复'"
      >
        <el-form-item
          label="答复"
          prop="answerContent"
          :rules="{
            required: title === '答复',
            message: '答复内容不能为空',
            trigger: 'blur',
          }"
        >
          <el-input
            type="textarea"
            v-model="dialogForm.answerContent"
            :rows="5"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button @click="show = false">关 闭</el-button>
        <el-button v-if="title === '答复'" type="primary" @click="submit">
          提 交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  unreadLetterPage,
  replyLetter,
  getLetterInfo,
} from "@/api2/partyManage";

export default {
  data() {
    return {
      formInline: {},
      tableData: [],
      listLoading: true,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      show: false,
      title: "",
      dialogForm: {},
    };
  },
  filters: {
    filterType(val) {
      const obj = {
        1: "建议",
        2: "咨询",
        3: "投诉",
        4: "举报",
        5: "其他",
      };
      return obj[val] || "其他";
    },
    filterAnswerStatus(val) {
      const obj = {
        1: "未答复",
        2: "已答复",
        3: "已撤销",
      };
      return obj[val];
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      unreadLetterPage({
        ...this.formInline,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((data) => {
        this.listLoading = false;
        this.tableData = data.data;
        this.total = data.total;
      });
    },
    onPageSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    onCurrentPageChange(val) {
      this.pageNum = val;
      this.getList();
    },
    search() {
      this.pageNum = 1;
      this.getList();
    },
    async view({ djLetterId }) {
      this.title = "信件详情";
      this.show = true;
      const res = await getLetterInfo({ djLetterId });
      this.dialogForm = res.data;
    },
    async reply({ djLetterId }) {
      this.title = "答复";
      this.show = true;
      this.resetForm();
      const res = await getLetterInfo({ djLetterId });
      this.dialogForm = res.data;
    },
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const { djLetterId, answerContent } = this.dialogForm;
          const params = { djLetterId, answerContent };
          await replyLetter(params);
          this.$message.success("答复成功");
          this.show = false;
          this.getList();
        }
      });
    },
    resetForm() {
      if (!this.$refs.form) return;
      this.$refs.form.resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding-bottom: 0;
}
</style>
